<template>

  <!-- 市场活动详情 -->
  <!-- label-width="110px" 表单整体距离左侧的宽度（可以让表单内容排列整齐） -->
  <el-form label-width="110px">

    <!-- id -->
    <el-form-item label="ID">
      <div class="detail">&nbsp; {{ this.activityDetail.id }}</div>
    </el-form-item>

    <!-- 负责人 -->
    <el-form-item label="负责人">
      <div class="detail">&nbsp; {{ this.activityDetail.ownerDO.name }}</div>
    </el-form-item>

    <!-- 活动名称 -->
    <el-form-item label="活动名称">
      <div class="detail">&nbsp; {{ this.activityDetail.name }}</div>
    </el-form-item>

    <!-- 开始时间 -->
    <el-form-item label="开始时间">
      <div class="detail">&nbsp; {{ this.activityDetail.startTime }}</div>
    </el-form-item>

    <!-- 结束时间 -->
    <el-form-item label="结束时间">
      <div class="detail">&nbsp; {{ this.activityDetail.endTime }}</div>
    </el-form-item>

    <!-- 活动预算 -->
    <el-form-item label="活动预算">
      <div class="detail">&nbsp; {{ this.activityDetail.cost }}</div>
    </el-form-item>

    <!-- 活动描述 -->
    <el-form-item label="活动描述">
      <div class="detail">&nbsp; {{ this.activityDetail.description }}</div>
    </el-form-item>

    <!-- 创建时间 -->
    <el-form-item label="创建时间">
      <div class="detail">&nbsp; {{ this.activityDetail.createTime }}</div>
    </el-form-item>

    <!-- 创建者 -->
    <el-form-item label="创建者">
      <div class="detail">&nbsp; {{ this.activityDetail.createByDO.name }}</div>
    </el-form-item>

    <!-- 编辑时间 -->
    <el-form-item label="编辑时间">
      <div class="detail">&nbsp; {{ this.activityDetail.editTime }}</div>
    </el-form-item>

    <!-- 编辑者 -->
    <el-form-item label="编辑者">
      <div class="detail">&nbsp; {{ this.activityDetail.editByDO.name }}</div>
    </el-form-item>

  </el-form>

  <!-- 填写备注表单 -->
  <!--
    :model="activityRemark"  表单绑定的数据
    label-width="110px"      表单整体距离左侧的宽度
    :rules="remarkRoles"     绑定验证规则
    ref="remarkRefForm"      表单提交之前验证表单的验证规则
  -->
  <el-form :model="activityRemarkQuery" label-width="110px" :rules="activityRemarkRules" ref="activityRemarkRefForm">
    <el-form-item label="填写备注" prop="noteContent">
      <el-input type="textarea" :rows="6" v-model.trim="activityRemarkQuery.noteContent" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="activityRemarkSubmit()">提交</el-button>
      <el-button type="primary" @click="goBack()" plain>返回</el-button>
    </el-form-item>
  </el-form>

  <!-- 市场活动备注列表 -->
  <!-- :data="activityRemarkList"  单向绑定表格数据 -->
  <el-table
      :data="activityRemarkList"
      style="width: 100%">

    <!-- type="index"  序号以1递增 -->
    <el-table-column type="index" label="序号" width="80px" />
    <!-- 要想当页面宽度改变时，展示数据的不换行，可以给el-table-column标签单独设置宽度 -->
    <el-table-column property="noteContent" label="备注内容" width="380" />
    <el-table-column property="createTime" label="备注时间" />
    <el-table-column property="createByDO.name" label="备注者" />
    <el-table-column property="editTime" label="编辑时间" />
    <el-table-column property="editByDO.name" label="编辑者" />
    <el-table-column label="操作">
      <!-- 作用域插槽 -->
      <template #default="scope">
        <!-- scope.row     获取当前行上的数据对象 -->
        <el-button type="success" @click="edit(scope.row)">编辑</el-button>
        <!-- scope.row.id  获取当前行上数据对象的id -->
        <el-button type="danger"  @click="remove(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页功能 -->
  <!--
      layout="prev, pager, next"  组件布局，子组件名用逗号分隔  prev, pager, next, jumper, ->, total
      @prev-click="toPage" 点击上一页触发函数
      @next-click="toPage" 点击下一页触发函数
      @current-change="toPage"  当前页发生改变时触发函数
      注意：这里的函数不要加括号，element-plus会自动传递一个参数（当前页数）
  -->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="this.pageSize"
      :total="this.total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

  <!-- 编辑备注的弹窗（对话框） -->
  <!--
    v-model                值为true时，显示对话框，false隐藏对话框
    center                 内容居中
    draggable              可拖拽的对话框
    :close-on-click-modal  是否可以通过点击对话框外的页面关闭对话框
    :destroy-on-close      对话框关闭时，是否销毁其中元素（例如：验证规则的提示信息）
    :show-close            是否显示关闭（×号）按钮
  -->
  <el-dialog
      v-model="editActivityRemarkDialogVisible"
      title="编辑备注"
      width="55%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :show-close="false">

    <!-- :model="userQuery"   表单绑定的数据 -->
    <!-- label-width="110px"  表单整体距离左侧的宽度 -->
    <!-- :rules="userRules"   绑定验证规则 -->
    <!-- ref="userRefForm"    表单提交之前验证表单的验证规则 -->
    <el-form :model="activityRemarkQuery" label-width="110px" :rules="activityRemarkRules" ref="activityRemarkRefForm">
      <!-- prop="noteContent" 要验证的内容 -->
      <el-form-item label="备注" prop="noteContent">
        <el-input type="textarea" :rows="6" v-model.trim="activityRemarkQuery.noteContent" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="editActivityRemarkSubmit()">提交</el-button>
        <el-button @click="closeEditActivityRemarkDialogVisible()">关闭</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
  import {messageConfirm, messageTip} from "../util/util.js";

  export default {
    name: "ActivityDetailView",

    // 注入父组件的函数
    inject: ['reload'],

    data() {
      return {
        // 市场活动详情对象
        activityDetail: {
          ownerDO: { },     // 负责人对象
          createByDO: { },  // 创建者对象
          editByDO: { }     // 编辑者对象
        },

        // 市场活动备注对象
        activityRemarkQuery: { },

        // 定义备注表单的验证规则
        activityRemarkRules: {
          noteContent: [
            { required: true, message: '请输入备注', trigger: 'blur' },
            { min: 5, max: 255, message: '备注字数在5-255之间', trigger: 'blur' }
          ]
        },

        // 市场活动备注列表
        activityRemarkList: [
          {
            CreateByDO: { },  // 创建者对象
            editByDO: { }     // 编辑者对象
          }
        ],

        pageSize: 0,   // 当前页数
        total: 0,      // 总条数

        // 编辑备注的弹窗是否可见
        editActivityRemarkDialogVisible: false,
      }
    },

    // 钩子函数，页面渲染完成后自动调用
    mounted() {
      // 加载市场活动详情
      this.loadActivityDetail();

      // 加载市场活动备注列表（默认查询第一页）
      this.loadActivityRemarkList(1);
    },

    methods: {
      // 加载市场活动详情
      loadActivityDetail() {
        // 获取路由路径的id参数
        let id = this.$route.params.id;
        // 向后端发送请求
        doGet("/api/activity/detail/" + id, { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 将查询到的市场活动信息填充到表单中
            this.activityDetail = resp.data.data;

            // 判断负责人、创建者、编辑者是否为null
            // 如果为null，则赋一个空对象，有数据就展示，没数据就不展示，避免使用的时候报错
            if (!this.activityDetail.ownerDO) {
              this.activityDetail.ownerDO = { };
            }
            if (!this.activityDetail.createByDO) {
              this.activityDetail.createByDO = { };
            }
            if (!this.activityDetail.editByDO) {
              this.activityDetail.editByDO = { };
            }
          } else {
            messageTip("市场活动信息获取失败", "error");
          }
        })
      },

      // 提交备注按钮
      activityRemarkSubmit() {
        // 验证备注表单规则
        this.$refs.activityRemarkRefForm.validate( (isValid) => {
          // 验证通过
          if (isValid) {
            // 向后端发送请求
            doPost("/api/activity/remark/add", {
              // 市场活动的id
              activityId: this.activityDetail.id,
              // 备注内容
              noteContent: this.activityRemarkQuery.noteContent
            }).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("提交成功", "success");
                // 刷新当前页面
                this.reload();
              } else {
                messageTip("提交失败", "error");
              }
            })
          }
        })
      },

      // 返回按钮
      goBack() {
        // 返回到上一个路由地址
        this.$router.go(-1);
      },

      // 加载市场活动备注列表
      loadActivityRemarkList(current) {
        // 向后端发送请求
        doGet("/api/activity/remark/list", {
          // 当前市场活动id
          activityId: this.$route.params.id,
          // 当前页数
          current: current
        }).then( (resp) => {
          if (resp.data.code === 200) {
            this.activityRemarkList = resp.data.data.list;

            // 设置分页信息（每页条数、总条数）
            this.pageSize = resp.data.data.pageSize;
            this.total = resp.data.data.total;
          } else {
            messageTip("备注获取失败", "error");
          }
        })
      },

      // 分页（跳转页面）
      toPage(current) {
        // element-plus会自动传入一个参数（发生变化后的当前页数）
        this.loadActivityRemarkList(current);
      },

      // 备注编辑按钮
      edit(activityRemark) {
        // 将当前要修改的备注信息显示到对话框
        this.activityRemarkQuery.id = activityRemark.id;
        this.activityRemarkQuery.noteContent = activityRemark.noteContent;

        // 弹出对话框
        this.editActivityRemarkDialogVisible = true;
      },

      // 编辑备注提交按钮
      editActivityRemarkSubmit() {
        // 验证备注的表单规则
        this.$refs.activityRemarkRefForm.validate( (isValid) => {
          // 验证通过
          if (isValid) {
            // 使用FormData对象作为参数
            let formData = new FormData();
            for (let field in this.activityRemarkQuery) {
              // 在属性不为null且有值的情况下再添加，否则数据没有意义，同时可以避免后端错误（例如：日期参数传到后端是一个空串，空串无法格式化）
              if (this.activityRemarkQuery[field]) {
                formData.append(field, this.activityRemarkQuery[field]);
              }
            }
            // 向后端发送请求
            doPut("/api/activity/remark/edit", formData).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                // 关闭对话框
                this.editActivityRemarkDialogVisible = false;
                // 刷新当前页面
                this.reload();
              } else {
                messageTip("编辑失败", "error");
              }
            })
          }
        })
      },

      // 关闭编辑备注的对话框
      closeEditActivityRemarkDialogVisible() {
        // 将备注内容清空
        this.activityRemarkQuery = { };

        // 关闭对话框
        this.editActivityRemarkDialogVisible = false;
      },

      // 删除市场活动备注按钮
      remove(id) {
        // 弹出确认框
        messageConfirm("确认删除该备注吗？").then(() => {
          // 用户点击确认，向后端发送请求
          doDelete("/api/activity/remark/remove/" + id, { }).then( (resp) => {
            if (resp.data.code === 200) {
              messageTip("删除成功", "success");
              // 刷新页面
              this.reload();
            } else {
              messageTip("删除失败", "error");
            }
          })
        }).catch(() => {
          // 用户点击取消，弹出提示信息
          messageTip("取消删除", "warning");
        })
      }
    }
  }
</script>

<style scoped>

  /* 市场活动详情信息 */
  .detail {
    height: 30px;
    width: 100%;
    background-color: #f6f7fb;    /* 背景色 */
    padding-left: 2px;            /* 左侧内边距 */
    border: 1px solid #e6e7eb;    /* 1px 边框宽度， solid 实线边框， #e6e7eb 边框颜色 */
    border-radius: 4px;           /* 边框角的弧度 */
  }

</style>

